<template>
  <div id="roomQuestionView">
    <a-split
        min="0.7"
        max="1"
        default-size="0.7"
        :style="{
          height: '84vh',
          width: '100%',
          minWidth: '500px',
          borderRadius: '5px',
        }"
    >
      <template #first>
        <DoQuestion :questionId="1"/>
      </template>
      <template #second>
        <ChatView :key="messages.length" :messages="messages"/>
      </template>
    </a-split>
  </div>
</template>

<script setup>

import DoQuestion from "../../components/problem/DoQuestion.vue";
import ChatView from "../../components/common/ChatView.vue";
import {onMounted, ref} from "vue";
import {RoomControllerService} from "../../apis/index.js";
import {useStore} from "vuex";
let ws = null;
const store = useStore();
const messages = ref([]);

onMounted(async () => {
  const res = await RoomControllerService.chat();
  if (res.code === 200) {
    ws = new WebSocket("ws://localhost:8888/client/room/" + res.data);
    ws.onmessage = (e) => {
      console.log("前端收到消息", e)
      store.dispatch("room/setMessages", JSON.parse(e.data));
    }
    await store.dispatch("room/setWebsocket", ws);
  }
})
</script>

<style scoped>

</style>
